<script setup>
import  { tool }  from "../tool/index"
import searchTitle from "../components/Search/searchBlog.vue"
import { onMounted, reactive, ref, watch } from 'vue'
import Search from "../class/img/search.svg"
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router"

const imageUrl = tool.serverPath+"api/app_api/image/download?fileName="
const router = useRouter()
const props = defineProps(['type', 'value'])
const SearchInput = ref(props.value)
const activeName = ref(props.type)
const OpLike = ref(true)
const limit = ref(12)
const blogKey = ref(["title"])
const labelKey = ref(["label_1", "label_2", "label_3", "label_4", "label_5"])
const blog = reactive({
    limit:limit,
    OpLike: OpLike.value,
    key: blogKey.value,
    value: [props.value],
    Or: true
})
const label = reactive({
    limit:limit,
    OpLike: OpLike.value,
    key: labelKey,
    value: [props.value],
    Or: true
})
const authors = ref({})
const authorsCount = ref(0)
const Category = ref([])
watch(props,()=>{
    SearchUser()
    location.reload()
})

async function SearchCategories(){
    try {
        const data = {
                key: "Search",
                data: {
                    key: [""],
                    value: [""],
                }
            }
        const response = await tool.axiosApi("category", data, "get")
        Category.value = response.data
    } catch (error) {
        console.log(error)
    }
}
async function SearchUser() {
    try {
        const data = {
                key: "Search",
                data: {
                    OpLike: OpLike.value,
                    key: ["username", "nickname"],
                    value: [props.value],
                    Or: true
                }
            }
        const response = await tool.axiosApi("user", data, "get")
        authors.value = response.data
        authorsCount.value = response.count
    } catch (error) {
        console.log(error)
    }
}
onMounted(() => {
    SearchUser()
    SearchCategories()
})
function SearchBlog(){
    if(SearchInput.value != undefined){
        router.push({ name: `BlogSearch`,params:{ type:activeName.value,value:SearchInput.value} })
    }else{
        ElMessage("搜索不得为空")
    }
}
function GotoHomePage(value) {
    const url = router.resolve({ name: 'homePage', params: { userID:value } }).href
    window.open(url, '_blank')
}
</script>

<template>
    <div class="Search_head">
        <div class="Search_image">
            <el-image :src="Search" />
        </div>
        <el-row class="Search_box">
            <el-col :span="2">
                <select v-model="activeName" class="select">
                    <option value="title" >标题</option>
                    <option value="label" >标签</option>
                    <option value="author" >作者</option>
                </select>
            </el-col>
            <el-col :span="20">
                <input class="Search_input" v-model="SearchInput" type="text">
            </el-col>
            <el-col :span="2">
                <el-button @click="SearchBlog()" class="Search_button">搜索</el-button>
            </el-col>
        </el-row>

    </div>
    <div class="Search_body">
        <div class="Search_content">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="标题" name="title">
                    <searchTitle :blog="blog"></searchTitle>
                </el-tab-pane>
                <el-tab-pane label="标签" name="label">
                    <searchTitle :blog="label"></searchTitle>
                </el-tab-pane>
                <el-tab-pane label="作者" name="author">
                    <el-row justify="center" v-if="authorsCount != 0">
                        <el-col @click="GotoHomePage(item.id)" class="Search_author" :span="4" v-for="item in authors" >
                           <div class="avatar" >
                            <el-image  :src="imageUrl + item.avatar" ></el-image>
                        </div>  
                           <div class="info" >
                       <div>  <el-text truncated> 昵称：{{ item.nickname }} </el-text> </div>
                       <div>
                        <el-text truncated>账号：{{ item.username }}</el-text>
                        </div>
                       <div>  <el-text> 性别：{{ item.gender }} </el-text></div>
                    </div>  
                        </el-col>
                    </el-row>
                    <el-empty v-else description="查无此人" /> 
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<style scoped>
.Search_head {
    padding-top: 50px;
    padding-bottom: 15px;
    background-color: #9ec1ff;
    background-color: #3B82FF;
    width: 100%;
}

.Search_head .Search_image {
    margin: 0 auto;
    margin-bottom: -8px;
    width: 250px;
}

.Search_head .Search_box {
    transition: all 0.5s;
    overflow: hidden;
    border-radius: 5px;
    margin: auto;
    height: 50px;
    width: 60%;
    background-color: #E6E6E6;
    display: flex;

}

.Search_head .Search_box:hover {
    box-shadow: 0px 20px 30px #cacaca7c;
}

.Search_head .Search_box .select {
    all: initial;
    all: unset;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
}

.Search_head .Search_box .Search_input {
    all: initial;
    all: unset;
    color: #696969;
    margin-left: 10px;
    margin-right: 10px;
    width: 97%;
    height: 100%;
}

.Search_head .Search_box .Search_button {
    border-radius: 0px;
    width: 100%;
    border: none;
    height: 100%;
}

.Search_body {
    padding: 0px 30px 30px 30px;
}


.Search_author {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
}
.Search_author .avatar{
    float: left;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 5px;
}
.Search_author .info{
    width:70%;
    margin-left: 10px;
}
.Search_author .menu_author .image {
    width: 100%;
    border-radius: 100%;
}
</style>